<template>
<h2>借款项目列表</h2>
借款款项名称<input type="text" v-model="state.name" />
利息<select v-model="state.iid">
                    <option value="0">--请选择--</option>
                    <option :value="item.I_Id" v-for="item in llist">{{ item.I_Year}}年{{item.I_Interest}}%</option>
                  </select>
                  <input type="button" @click="show" value="查询" />
<table class="table table-bordered">
    <tr align="center">
        <td><input type="checkbox"></td>
                <td>借款项目编号</td>
                <td>借款项目名称</td>
                <td>借款最高金额</td>
                <td>借款最高年限</td>
                <td>预计月还款金额</td>
                <td>利息值</td>
                <td>操作</td>
    </tr>
    <tr align="center" v-for="item in list">
        <td><input type="checkbox"></td>
                <td>{{item.B_Id}}</td>
                <td>{{item.B_Name}}</td>
                <td>{{item.B_Money}}</td>
                <td>{{item.B_Year}}</td>
                <td>{{(item.B_Money/100/12).toFixed(2)}}CNY</td>
                <td>{{item.T_Interest.I_Interest}}</td>
                <td><input type="button" value="删除" class="btn btn-danger" />
                    <input type="button" value="修改" class="btn btn-primary" @click="upd(item.B_Id)" /></td>
    </tr>
</table>
<div>
    <input type="button" value="首页" @click="page('a')" />
        <input type="button" value="上一页" @click="page('prev')" />
        <input type="button" value="下一页" @click="page('next')" />
        <input type="button" value="尾页" @click="page('b')" />
        共<span style="color: red;">{{ListCount}}</span>条数据
        每页<span style="color: red;">{{state.pageSize}}</span>条 
        当前第<span style="color: red;">{{state.pageIndex}}</span>/
        <span style="color: red;">{{PageCount}}</span>页
</div>

</template>

<script setup lang="ts">
import{reactive,ref,toRefs,onMounted} from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'

let router=useRouter()
let data:any=reactive({
    list:[],
    llist:[],
    state:{
        name:'', 
        iid:'',
        pageSize:'2',
        pageIndex:'1',
    },
    ListCount:'0',
    PageCount:'0',
})
let {state,ListCount,PageCount,list,llist}=toRefs(data)
onMounted(()=>{
    show();
    bang();
})
//绑下拉
const bang=()=>{
    axios({
        url:"/api/Borrow/SelInterest",
        method:'get',
    })
    .then(res=>{
        console.log(res.data.data);
        llist.value=res.data.data;
    })
    .catch(err=>{
        console.log(err);   
    })
}
//显示
const show=()=>{
    axios({
        url:"/api/Borrow/GetBorrowList",
        method:'get',
        params:state.value
    })
    .then(res=>{
        console.log(res.data.data)
        list.value=res.data.data;
        ListCount.value=res.data.ListCount
        PageCount.value=res.data.PageCount
    })
    .catch(err=>{
        console.log(err)
    })
}
//分页
const page=(aa:any)=>{
    console.log(aa) 
    if(aa=='a')
    {
        state.value.pageIndex=1;
   }
    else if(aa=='b')
    {
        state.value.pageIndex=PageCount.value;     
    }
   else if(aa=='prev')
    {
       state.value.pageIndex--; 
    }
   else if(aa=='next')
    {
       state.value.pageIndex++; 
    }
 
    show();
}
//修改
const upd=(id:any)=>{
    router.push({
        path:'/main/borrowUpd',
        query:{
            id:id
        }
    })
}
</script>





<style scoped>

</style>